<template>
	<div class="wrapper">
		<div class="content_one">
			<span class="iconfont">&#xe752;</span>
			<div @click='BtnFn1'>
				<span class="content_text">全部订单<span></span></span>
				<span class="content_infor">></span>
			</div>
			
		</div>
		<div>
			<div class="content_two" v-for='item of contentsTwo' :key='item.id'>
				<span class="iconfont">{{item.iconName}}</span>
				<div @click='BtnFn2'>
					<span class="content_text">{{item.contentText}}</span>
					<span class="content_infor">{{item.infor}} ></span>
					<span class='line'></span>
				</div>
				
			</div>
		</div>
		<div class="big_line"></div>
		<div>
			<div class="content_three" v-for='item of contentsThree' :key='item.id'>
				<span class="iconfont">{{item.iconName}}</span>
				<div @click='BtnFn3(item.id)'>
					<span class="content_text">{{item.contentText}}</span>
					<span class="content_infor">{{item.infor}} ></span>
					<span class='line'></span>
				</div>
				
			</div>
		</div>
	</div>
  
</template>

<script>
export default {
  name: 'loginContent',
  data(){
	  return{
		  contentsTwo:[
			  {
				  id:'001',
				  iconName:'\ue602',
				  contentText:'奖金',
				  infor:'',
				  path:'/'
			  },
			   {
				  id:'002',
				  iconName:'\ue605',
				  contentText:'立返',
				  infor:'',
				  path:'/'
			  },
			   {
				  id:'003',
				  iconName:'\ue667',
				  contentText:'红包',
				  infor:'',
				  path:'/'
			  }
		  ],
		  contentsThree:[
				  {
					  id:'011',
					  iconName:'\ue60b',
					  contentText:'常用信息',
					  infor:'旅客、地址、银行卡、发票抬头',
					  path:'/'
				  },
				   {
					  id:'012',
					  iconName:'\ue623',
					  contentText:'我的发票',
					  infor:'发票查询',
					  path:'/'
				  },
				   {
					  id:'013',
					  iconName:'\ue646',
					  contentText:'我的收藏',
					  infor:'',
					  path:'/'
				  },
				  {
					  id:'014',
					  iconName:'\ue614',
					  contentText:'关于同程',
					  infor:'',
					  path:'/'
				  }
		  ]
		  
	  }
  },
  methods:{
	  BtnFn1(){
		  if(this.$store.state.loginId==0){
			  this.$router.push('./loginPage')
		  }else{
			  
		  }
	  },
	  BtnFn2(path){
	  		  if(this.$store.state.loginId==0){
	  			  this.$router.push('./loginPage')
	  		  }else{
	  			  
	  		  }
	  },
	  BtnFn3(index){
		  if(parseInt(index)===14){
			  //console.log(111)
			  window.location.href='https://m.ly.com/about.html'
		  }else{
			if(this.$store.state.loginId==0){
				  this.$router.push('./loginPage')
			}else{
				
			}  
		  }	  
	  },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="stylus" scoped>

.wrapper
	width:100%	
	.content_one
		border-bottom:10px solid #eee
	.content_two:nth-child(3)
		border-bottom:10px solid #eee
	.content_two:nth-child(3)>.line
		display:none
	.content_three:nth-child(4)>.line
		display:none
	.content_one,.content_two,.content_three
		width:100%
		background:#fff
		padding:0.1rem 0.25rem
		box-sizing:border-box
		display:flex
		.iconfont
			width:10%
			font-size:0.4rem
			line-height:0.6rem
			opacity:0.3
			text-align:center
		div
			width:90%
			position:relative
			.content_text
				
				font-size:0.3rem
				line-height:0.6rem
			.content_infor
				float:right
				font-size:0.2rem
				text-align:right
				line-height:0.6rem
				color:#ccc
			.line
				position:absolute
				width:100%
				bottom:0
				right:0
				background:#eee
				height:2px
	.content_one>.iconfont
		font-size:0.4rem
	.content_two:nth-child(1)>.iconfont
		font-size:0.4rem
	.content_three:nth-child(1)>.iconfont
		font-size:0.4rem
</style>
